<template>
	<view class="content">
		<view class="swiper-box">
			<swiper class="swiper" autoplay="true" interval="5000" circular="true" :current="swiperIndex"
				@change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index" v-if="item.status==0"
					@click="goSwiperDetail(item)">
					<image class="swiper-img" :src="item.img" :data-index="index"></image>
				</swiper-item>
			</swiper>
			<!-- 自定义轮播图指示点 -->
			<view class="swiper-dost">
				<view class="item" v-for="i in swiperList.length" :key="i">
					<view :class="i == swiperIndex ? 'dost-on' : 'dost'"></view>
				</view>
			</view>
		</view>

		<view class="btn-box">
			<view class="btn" @click="goRank('/myPage/ranking/ranking')">
				<image src="http://sni1muz85.hd-bkt.clouddn.com/img/index/icons/ranking.png"></image>
				<text>排行榜</text>
			</view>

			<view class="solid"></view>

			<view class="btn" @click="goSign">
				<image src="http://sni1muz85.hd-bkt.clouddn.com/img/index/icons/check.png"></image>
				<text>打卡/海报</text>
				<text class="time">{{startTime}} — {{endTime}}</text>
			</view>
		</view>

		<view class="navbar-box">
			<swiper class="navbar" @change="changeNavbar">
				<swiper-item class="item" v-for="(item, index) in navbarList" :key="index">
					<view class="navbar-item" v-for="(v, inx) in item" :key="inx" @click="goNavbarDetail(v)"
						v-if="v.status==0">
						<image class="navbar-img" :src="v.img"></image>
						<view class="navbar-title">{{ v.name }}</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 自定义导航栏指示点 -->
			<view class="navbar-dost">
				<view class="box">
					<view class="item" v-for="i in navbarList.length" :key="i">
						<view :class="i == navbarIndex ? 'dost-on' : 'dost'"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="cards">
			<view style="height: 300rpx;">
				<view class="carddl" @click="goPicsrc(2)"
					style="height: 100%;display: flex;align-items: center;background-image:linear-gradient(-45deg, red ,orange )">
					<view class="carddt">
						<image style="width: 100rpx;height: 100rpx;" src="../../static/img/tabBar/liwu.png"></image>
						<view class="cardtit" style="color: #fff;">参与抽奖</view>
						<view class="cardtext" style="color: #eee;">可直接提现到微信</view>
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: space-between;height: 300rpx;">
				<view class="carddl" @click="goPicsrc(3)">
					<view class="carddt">
						<view class="cardtit">创建打卡</view>
						<view class="cardtext">创建自己的打卡</view>
					</view>
				</view>
				<view class="carddl" @click="goPicsrc(4)">
					<view class="carddt">
						<view class="cardtit">发布抽奖</view>
						<view class="cardtext">创建自己的抽奖</view>
					</view>
				</view>
			</view>
		</view>
		<swiper class="ad" autoplay="true" interval="3000" circular="true" :style="{'height':'400rpx' }"
			@change="swiper2Change">
			<swiper-item class="ad-item" v-if="bannerAdShow">
				<ad unit-id="adunit-32ee9f1ef2bea9fa" @error="offAd" @close="offAd"></ad>
			</swiper-item>
			<swiper-item class="ad-item" v-for="(item, index) in adList" :key="index" @click="goSwiperDetail(item)"
				v-if="item.status==0">
				<!--        <view class="ad-item" v-for="(item, index) in adList" :key="index" @click="goAd(item)">-->
				<image class="ad-img" @load="loadImage($event,item)" :style="{'height':imgheight+'rpx' }" v-if="item"
					:src="item.img"></image>
				<!--        </view>-->
			</swiper-item>
		</swiper>
		<scroll-view class="image-select-view" scroll-x>
			<view class="f-row r-center">
				<view class="image-view" v-for="(item, index) in imageTypeAry" :key="index"
					:class="image_view_id==index?'image-view on':'image-view'"
					@click="getImageList(item.dictCode,index)">
					{{item.dictLabel}}
				</view>
			</view>
		</scroll-view>
		<wallpaper class="image-list" :imgList="imageIconAry"></wallpaper>
		<view style="margin-top: 20rpx;"></view>
		<!--		<view class="ad" autoplay="true" interval="7000" duration="6800" circular="true">-->
		<!--			<view class="ad-item" v-for="(item, index) in adList" :key="index" @click="goAd(item)">-->
		<!--				<image class="ad-img" :src="item.img"></image>-->
		<!--			</view>-->
		<!--		</view>-->
		<uni-popup ref="popup" class="popup" type="bottom" background-color="#f7f7f7" @change="change">
			<!--      <scroll-view>-->
			<view class="list">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<image class="bgimg" src="http://sni1muz85.hd-bkt.clouddn.com/img/my/card_bg.png"></image>
					<view class="card">
						<view class="left">
							<view class="text">
								<view class="y">￥</view>
								<view class="money">{{ item.money }}</view>
							</view>
							<text class="text2">现金</text>
							<view class="a"></view>
						</view>
						<view class="right">
							<view class="title">{{ item.name }}</view>
							<view class="line">
								<view class="time">领取日期：{{ item.receiveTime }}</view>
								<!--									<view class="type" v-if="item.type == 1">使用中</view>-->
								<view class="num">剩余{{ item.number }}张</view>
							</view>
							<view class="line2">
								<view class="detail" @click="goCardDetail(item)">
									<text>规则</text>
									<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/detail.png"></image>
								</view>
								<!--									<view class="number" v-if="item.type == 1">剩余数量：{{ item.number }}</view>-->
								<view class="btnrow">
									<!--                  <view class="btn btn1" v-if="item.source ===0" @click="sendUser(item)">送给好友</view>-->
									<view class="btn btn2" @click="goIndex(item)">去使用</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--    <lsl-protocol-popup hideTabBar="true" title="用户协议和隐私政策提示" predesc="感谢您使用so处cp。为保护您的个人信息安全，在您使用so处cp的服务前，请务必仔细阅读" subdesc='以了解详细内容。如您同意，请点击“同意并继续”并开始使用我们的服务。' top_img='https://xxx.xxx.com/images/home/zcts@2x.png' color="#C9935C" onNeed='false'  title_style="padding-top:60rpx;" open_type='agreePrivacyAuthorization'></lsl-protocol-popup>-->

		<!--&lt;!&ndash;      </scroll-view>&ndash;&gt;-->
		<!--    </uni-popup>-->
		<!--    <view class="popup" v-if="isShowPopup">-->
		<!--    </view>-->
	</view>
</template>

<script>
	import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
	import Wallpaper from "../../components/wallpaper/wallpaper.vue";
	export default {
		components: {
			UniPopup,
			Wallpaper
		},
		data() {
			return {
				image_view_id: 0,
				bannerAd: true,
				isShowPopup: false,
				swiperIndex: 0,
				swiper2Index: 0,
				imgwidth: 0,
				imgheight: 0,
				imgHeights: [],
				swiperList: [],
				navbarIndex: 0,
				navbarList: [],
				loginAuthRes: "",
				startTime: "",
				endTime: "",
				webViewLink: "",
				adList: [
					// { id: 1, img: "http://sni1muz85.hd-bkt.clouddn.com/img/index/swiper.png" }
				],
				cardList: [{
						tit: '发布抽奖',
						text: '创建自己的抽奖',
						id: 4,
						icon: ''
					},
					{
						tit: '参与抽奖',
						text: '可直接提现到微信',
						id: 2,
						icon: ''
					},
					{
						tit: '创建打卡',
						text: '创建自己的打卡',
						id: 3,
						icon: ''
					},


				],
				dataList: [],
				cardUseList: [],
				todaySignLog: [],
				loginRes: {},
				isNewUser: false,
				getCodeData: {},
				localAd: false,
				imageTypeAry: [],
				imageIconAry: [],
			};
		},

		onLoad(params) {
			if (params.logId) {
				this.$store.state.logId = params.logId
			}
			if (params.parentCityName) {
				uni.setStorageSync('parentCityName', params.parentCityName)
			}
			if (params.parentPartnerCode) {
				uni.setStorageSync('parentPartnerCode', params.parentPartnerCode);
			}
			if (params.parentUserType) {
				uni.setStorageSync('parentUserType', params.parentUserType);
			}
			if (params.parentUserType && params.parentCityName && params.parentPartnerCode) {
				this.addPartner(params.parentUserType, params.parentCityName, params.parentPartnerCode);
			}
			// 登录
			// this.getCode()
			// 检测首页Banner广告
			if (this.$store.state.indexAd) {
				setTimeout(() => {
					let ad = wx.createInterstitialAd({
						adUnitId: 'adunit-c7e7f5543a265fc7'
					})
					ad.onError(() => {})
					ad.show().then(() => {
						this.$store.state.indexAd = false
					})
				}, 1000)
			}
			if (wx.createRewardedVideoAd) {
				this.videoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-611ebb8ddf040fcf'
				})
				this.videoAd.onError((err) => {
					// 加载本地视频
					this.localAd = true
				})
				this.videoAd.onClose((res) => {
					if (res.isEnded) {
						this.$api.request({
							url: this.$api.adLog,
						})
						uni.setStorageSync("lastIndexAdTime", Date.now())
						this.$api.request({
							url: this.$api.signUP,
							data: {
								cardGroupId: this.cardUseList[0].cardGroupId
							}
						}).then(res => {
							uni.navigateTo({
								url: "/myPage/check/check",
							})
						})
					}
				})
			}
			let that = this;
			this.$api.request({
				url: this.$api.imageType,
				data: {
					type: "image_type"
				}
			}).then(resp => {
				if (resp.code == 200) {
					that.imageTypeAry = resp.data;
					if (resp.data) {
						that.getImageList(resp.data[0].dictCode);
					}
				}
			});
			// uni.requestSubscribeMessage({
			// 	tmplIds: [''],
			// 	success(res) {
			// 		console.log(res);
			// 	}
			// })
		},
		onShow() {
			// 页面初始化
			this.initData()
			this.ordermsg()
		},
		methods: {
			addPartner(userType, cityId, inviteCode) {
				let params = {
					userType: userType,
					cityName: cityId,
					inviteCode: inviteCode
				};
				this.$api.request({
					url: this.$api.saveCityPartner,
					method: "POST",
					data: params
				}).then(res => {})
			},
			goRank() {
				uni.navigateTo({
					url: "/myPage/ranking/ranking"
				})
			},
			handleDisagree() {
				// 处理用户不同意隐私协议的逻辑
			},
			handleAgree() {
				// 处理用户同意隐私协议的逻辑
			},
			loadImage(event, item) {
				this.imgwidth = event.detail.width, //获取图片真实宽度
					this.imgheight = event.detail.height
				let ratio = event.detail.width / event.detail.height
				let viewHeight = 750 / ratio
				this.imgHeights.push(viewHeight)
			},
			goIndex(item) {
				let id = item ? item.id : null
				let url;
				if (item) {
					url = this.$api.signUP + "?cardGroupId=" + id
				} else {
					url = this.$api.signUP
				}
				this.$api.request({
					url: url,
				}).then(res => {
					this.$refs.popup.close()

					uni.navigateTo({
						url: "/myPage/check/check"
					})
				})
			},
			goCardDetail() {
				uni.navigateTo({
					url: "/myPage/check/check"
				})
			},
			// 轮播图跳转
			goSwiperDetail(item) {
				if (item.type === 1) {
					let str = JSON.stringify(item.content)
					uni.navigateTo({
						url: "/pages/detail/swiperDetail?bannerId=" + item.id
					})
				}
				if (item.type === 2) {
					uni.navigateTo({
						url: "/pages/index/webView?link=" + item.link
					})
				}
			},
			offAd() {
				this.bannerAd = false
			},
			goSign() {
				this.$api.request({
					url: this.$api.signIn,
				}).then(res => {
					let that = this
					// 如果有使用的卡
					this.$api.request({
						url: this.$api.cardUseLog,
					}).then(res => {
						this.cardUseList = res.data
						if (this.cardUseList.length > 0) {
							const lastAdTime = uni.getStorageSync("lastIndexAdTime")
							const showAd = (new Date(lastAdTime).toDateString() === new Date()
								.toDateString())
							if (showAd) {
								/** 已展示过广告 */
								this.$api.request({
									url: this.$api.signUP,
									data: {
										cardGroupId: this.cardUseList[0].cardGroupId
									}
								}).then(res => {
									uni.navigateTo({
										url: "/myPage/check/check",
									})
								}).catch((err) => {
									uni.hideToast()
									uni.navigateTo({
										url: "/myPage/check/check",
									})
								})
							} else {
								/** 展示广告 */
								if (this.localAd) {
									// 获取广告列表
									that.$api.request({
										url: that.$api.advertList,
									}).then(res => {
										let adList = res.data;
										let item = adList[Math.floor(Math.random() * adList
											.length)]
										this.goUrl("/pages/index/ad?type=3&link=" + item.link +
											"&times=" +
											item.second + "&groupId=" + that.cardUseList[0]
											.cardGroupId
										)
									})
								} else {
									this.videoAd.load()
									this.videoAd.show().catch(() => {
										// 获取广告列表
										that.$api.request({
											url: that.$api.advertList,
										}).then(res => {
											let adList = res.data;
											let item = adList[Math.floor(Math.random() *
												adList.length)]
											this.goUrl("/pages/index/ad?type=3&link=" +
												item.link + "&times=" +
												item.second + "&groupId=" + that
												.cardUseList[0].cardGroupId
											)
										})
									})
								}
							}
						} else {
							this.$api.request({
								url: this.$api.noUseCardSignIn,
							}).then(res => {
								this.goUrl('/myPage/check/check')
							})
						}
					})
				})
			},
			initData() {
				// 获取头部轮播图
				this.$api.request({
					url: this.$api.getBanner + "?location=" + 0,
				}).then(res => {
					this.swiperList = res.data;
				})
				// 获取底部轮播图
				this.$api.request({
					url: this.$api.getBanner + "?location=" + 1,
				}).then(res => {
					this.adList = res.data;
				})
				// 获取菜单
				this.$api.request({
					url: this.$api.icon,
				}).then(res => {
					this.navbarList = res.data;
				})

				let that = this
				this.$api.request({
					url: this.$api.publicList,
					data: {
						name: "signConfig"
					}
				}).then(res => {
					if (res.data) {
						that.startTime = JSON.parse(res.data[0].value).start.slice(0, 5)
						that.endTime = JSON.parse(res.data[0].value).end.slice(0, 5)
					}
				})
			},
			getUserInfo() {
				let that = this
				uni.showLoading()
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: res.provider,
								success: (loginRes) => {
									that.loginRes = loginRes
								}
							})
							uni.getUserProfile({
								lang: 'zh_CN',
								desc: '登录',
								success: (userRes) => {
									let timer = setTimeout(() => {
										clearTimeout(timer)
										that.getLogin(that.loginRes)
									}, 500)
								},
								fail: (err) => {
									uni.showToast({
										title: '获取登录信息失败，请重新授权！',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			goAd(item) {
				uni.navigateTo({
					url: "/pages/index/ad?link=" + item.link + "&times=" + item.second + "&type=1"
				})
			},
			needLogin() {
				this.$api.request({
					url: this.$api.getSignGroup,
				}).then(res => {
					this.dataList = res.data
				})
				this.$api.request({
					url: this.$api.cardUseLog,
				}).then(res => {
					this.cardUseList = res.data
				})
				this.$api.request({
					url: this.$api.todaySignLog,
				}).then(res => {
					this.todaySignLog = res.data;
				})
			},
			isLogin() {
				let token = uni.getStorageSync("token")
				return token ? true : false
			},
			change() {},
			// 导航栏跳转
			goNavbarDetail(item) {
				if (item.name == '抽奖') {
					uni.navigateTo({
						url: "/pages/prize_com/myprize"
					})
				}
				if (item.name == '我的抽奖') {
					uni.navigateTo({
						url: '/myPage/prize_com/addRecrod'
					})
				}
				if (item.name == '我的圈子') {
					uni.navigateTo({
						url: '/myPage/sign/signOn'
					})
				}
				if (item.name == '打卡接龙') {
					uni.navigateTo({
						url: "/pages/sign/mysign"
					})
					if (item.type === 0) {
						return
					}
					if (item.type === 1) {
						uni.navigateTo({
							url: "/pages/detail/swiperDetail?iconId=" + item.id
						})
						return;
					}
					if (item.type === 2) {
						uni.navigateTo({
							url: "/pages/index/webView?link=" + item.link
						})
						return;
					}
				}
			},
			goPicsrc(id) {
				if (id == 1) {
					uni.navigateTo({
						url: "/myPage/sign/signOn"
					})
				}
				if (id == 2) {
					uni.navigateTo({
						url: "/myPage/prize_com/add"
					})
				}
				if (id == 3) {
					uni.navigateTo({
						url: "/myPage/sign/signIn"
					})
				}
				if (id == 4) {
					uni.navigateTo({
						url: "/myPage/prize_com/create"
					})
				}
			},
			// 页面跳转
			goUrl(url) {
				this.$api.request({
					url: this.$api.signIn,
				}).then(res => {
					uni.navigateTo({
						url
					})
				})
			},
			// 轮播图切换时
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			// 导航栏切换
			changeNavbar(e) {
				this.navbarIndex = e.detail.current
			},
			swiper2Change(e) {
				this.swiper2Index = e.detail.current
			},
			getImageList(categoryId, index) {
				this.image_view_id = index
				let that = this;
				this.$api.request({
					url: this.$api.imageList,
					method: "POST",
					data: {
						"categoryId": categoryId
					}
				}).then(resp => {
					if (resp.code == 200) {
						that.imageIconAry = resp.data;
					}
				});
			},
			//  订阅信息
			ordermsg() {
				console.log('调用订阅');
				uni.requestSubscribeMessage({
					tmplIds: [''],
					success(res) {
						console.log(res, '订阅api调用');
					}
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	@import "@/static/css/app.less";

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.image-list {
			height: 1200rpx;
			overflow: scroll;
		}

		.swiper-box {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.swiper {
				height: 600rpx;
				width: 750rpx;

				.swiper-item {
					height: 100%;
					width: 100%;

					.swiper-img {
						height: 100%;
						width: 100%;
					}
				}
			}

			.swiper-dost {
				display: flex;
				position: absolute;
				bottom: 70rpx;

				.item {
					height: 30rpx;
					width: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.dost {
						height: 10rpx;
						width: 10rpx;
						border-radius: 50%;
						background-color: #ccc;
					}

					.dost-on {
						height: 15rpx;
						width: 15rpx;
						border-radius: 50%;
						background-color: #fff;
					}
				}
			}
		}

		.btn-box {
			width: 710rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// margin-top: 50rpx;
			border-radius: @radius;
			background-color: #fff;
			padding: 50rpx 0;
			position: relative;
			margin-top: -50rpx;
			// box-shadow: 0rpx 10rpx 20rpx #ccc;

			.btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 100rpx;

				image {
					height: 87rpx;
					width: 87rpx;
				}

				text {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}

				.time {
					font-size: 28rpx;
					color: #8C8C8C;
					position: absolute;
					bottom: 16rpx;

				}
			}

			.solid {
				height: 106rpx;
				border-left: 1rpx solid #cccccc;
			}
		}

		.navbar-box {
			width: 710rpx;
			height: 200rpx;
			background-color: #fff;
			position: relative;
			border-radius: @radius;
			margin-top: 20rpx;

			.navbar {
				width: 710rpx;
				height: 200rpx;

				.navbar-item {
					width: 25%;
					display: inline-block;
					text-align: center;
					margin: 32rpx 0rpx;

					.navbar-img {
						height: 74rpx;
						width: 74rpx;
					}

					.navbar-title {
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.navbar-dost {
				width: 710rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				top: -25rpx;

				.box {
					height: 10rpx;
					display: flex;
					background-color: #aaa;
					border-radius: 30%;

					.item {
						.dost {
							height: 10rpx;
							width: 20rpx;
							// background-color: #aaa;
							// border-radius: 30%;
						}

						.dost-on {
							height: 10rpx;
							width: 20rpx;
							background-color: #07C160;
							border-radius: 30%;
						}
					}
				}
			}
		}

		.cards {
			width: 710rpx;
			height: 320rpx;
			margin: 20rpx auto 0rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.carddl {
				float: left;
				min-width: 350rpx;
				height: 140rpx;
				background-color: #eee;
				border-radius: @radius;

				.carddt {
					float: left;
					width: 100%;
					height: 60%;
					padding: 10% 5%;

					.cardtit {
						font-weight: bold;
					}

					.cardtext {
						font-size: 1.6vh;
						color: red;
						margin-top: 0.5vh;
					}
				}

			}

		}

		.wxad {
			position: relative;
			margin-top: 20rpx;
			width: 710rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.ad {
			width: 710rpx;
			display: flex;
			position: relative;
			margin-top: 20rpx;
			height: 0;

			.ad-item {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;

				.ad-img {
					height: 100% !important;
					width: 100%;
					border-radius: 15rpx;
				}
			}
		}

		.image-select-view {
			position: relative;
			margin-top: 20rpx;
			width: 710rpx;

			.image-view {
				position: relative;
				width: 200rpx;
				min-width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				background: #FFFFFF;
				text-align: center;
				margin-right: 10rpx;
				font-size: 28rpx;
			}

			.image-view.on {
				background-color: skyblue;
				font-weight: bold;
				color: #fff;
			}
		}

		.popup {
			//height: 100%;
			//width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			//height: 1000rpx;
			margin-top: 20rpx;

			.list {
				overflow-y: auto;
				height: 1000rpx;
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.item {
					position: relative;
					//margin-top: 30rpx;

					.bgimg {
						width: 92vw;
						height: 200rpx;
					}

					.card {
						width: 92vw;
						height: 200rpx;
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 15rpx;

						display: flex;
						align-items: center;

						// z-index: 10;
						.left {
							height: 200rpx;
							width: 240rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							position: relative;

							.text {
								color: #fff;
								display: flex;
								align-items: flex-end;

								.y {
									font-size: 28rpx;
									margin-bottom: 10rpx;
								}

								.money {
									font-size: 48rpx;
									font-weight: bold;
								}
							}

							.text2 {
								font-size: 28rpx;
								margin-top: 10rpx;
								color: #fff;
							}

							.a {
								height: 40rpx;
								width: 40rpx;
								background-color: #fff;
								border-radius: 50%;
								position: absolute;
								right: -15rpx;
							}
						}

						.right {
							height: 200rpx;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;

							.title {
								font-size: 38rpx;
								font-weight: bold;
								color: #333333;
								margin-top: 10rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.line {
								width: 400rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 10rpx;
								font-size: 32rpx;

								.time {
									font-size: 24rpx;
									color: #8A8A8A;
								}

								.num {
									color: #8A8A8A;
								}

								.type {
									color: #E11260;
								}

							}

							.line2 {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 10rpx;

								.detail {
									display: flex;
									align-items: center;

									text {
										font-size: 28rpx;
									}

									image {
										height: 30rpx;
										width: 30rpx;
										// background-color: #E11260;
										border-radius: 50%;
										margin-left: 10rpx;
									}
								}

								.number {
									font-size: 32rpx;
								}

								.btnrow {
									display: flex;

									.btn {
										font-size: 28rpx;
										padding: 6rpx 20rpx;
										border: 1rpx solid #07C160;
										border-radius: 30rpx;
										margin-left: 10rpx;
									}

									.btn1 {
										color: #07C160;
									}

									.btn2 {
										color: #fff;
										background-color: #07C160;
									}
								}
							}
						}
					}
				}
			}


		}

	}
</style>